<template>
	<div class="hello">
		<mymask v-if="flag" @getChildrenflag="setting" :btn="mydate.btn"></mymask>
		<myheader type='index'></myheader>
		<myswiper></myswiper>
		<div class="seachBox">
			<input @click="opsearch" autocomplete="off" type="text" name="keyword" id="keyword" value="" placeholder=" 输入您想找的区域/商圈或者写字楼名称" class="iptHeader">
			<span class="btSelectHeader locat"><img src="../assets/home/image/home_search.png"/></span>
		</div>
		<div class="nav-list">
			<ul>
				<li>
					<a><span @click='tolist(0)' class="bgColorA"><img src="../assets/home/image/home_iconLease.png"/></span>写字楼出租 </a>
				</li>
				<li>
					<a><span @click='tolist(1)' class="bgColorB"><img src="../assets/home/image/home_iconLease_1.png"/></span> 找楼盘</a>
				</li>
				<li>
					<a><span @click='tolist(2)' class="bgColorC"><img src="../assets/home/image/home_iconLease_2.png"/></span>共享办公 </a>
				</li>
				<li>
					<a><span @click='tolist(3)' class="bgColorD"><img src="../assets/home/image/home_iconLease_3.png"/></span>创意园区 </a>
				</li>
				<li>
					<router-link to='/others'><span class="bgColorE"><img src="../assets/home/image/home_iconLease_4.png"/></span>帮你找房 </router-link>
				</li>
				<li>
					<a><span @click='tolist(4)' class="bgColorF"><img src="../assets/home/image/home_iconLease_5.png"/></span>投放房源 </a>
				</li>
				<li>
					<a><span @click='tolistnews' class="bgColorG"><img src="../assets/home/image/home_iconLease_6.png"/></span> 好租资讯 </a>
				</li>
			</ul>
		</div>
		<div class="spaceComm"></div>
		<div class="swiper-box">
			<h2 class="titHeadlines swiper-no-swiping">行业头条</h2>
			<div class="listHeadlines">
				<div class="swiper-itme" :class="{anim:animate==true}">
					<router-link to='/news' v-for='item in items'>{{item.Tou}}</router-link>
					<span>＞</span>
				</div>

			</div>

		</div>

		<div class="spaceComm"></div>
		<div class="coreWrap">
			<div class="topCore">
				<h2>核心商圈</h2>
			</div>
			<ul class="listCore">
				<li>
					<a><img @click='tolist(0)' src="../assets/home/image/home_core_1.jpg" /><i class="maskCore"></i><span>解放碑</span></a>
				</li>
				<li>
					<a><img @click='tolist(2)' src="../assets/home/image/home_core_2.jpg" /><i class="maskCore"></i><span>观音桥</span></a>
				</li>
				<li>
					<a><img @click='tolist(1)' src="../assets/home/image/home_core_3.jpg" /><i class="maskCore"></i><span>江北嘴</span></a>
				</li>
				<li>
					<a><img @click='tolist(3)' src="../assets/home/image/home_core_4.png" /><i class="maskCore"></i><span>化龙桥</span></a>
				</li>
			</ul>
			<div class="areaTop">
				<span>区域</span>
				<router-link to='' class='nearby'><i class="iconNearby"></i>附近写字楼</router-link>
			</div>
			<div class="listArea">
				<ul>
					<li>
						<router-link to='/list'>全部</router-link>
					</li>
					<li>
						<router-link to='/list'>渝中</router-link>
					</li>
					<li>
						<router-link to='/list'>江北</router-link>
					</li>
					<li>
						<router-link to='/list'>渝北</router-link>
					</li>
					<li>
						<router-link to='/list'>九龙坡</router-link>
					</li>
					<li>
						<router-link to='/list'>南岸</router-link>
					</li>
				</ul>
			</div>
		</div>
		<div class="spaceComm"></div>
		<div class="registerWrap">
			<router-link to='/user'><img src="../assets/home/image/member.jpg" /></router-link>
		</div>
		<div class="coreWrap">
			<div class="topCore">
				<h2>热门专题</h2>
				<router-link to=''>更多>></router-link>
			</div>
			<div class="hotTopic">
				<div class="hotTopicLeft">
					<router-link to='/list'>
						<img src="../assets/home/image/home_popular_1.jpg" />
						<i class="maskCore"></i>
						<span>共享办公</span>
					</router-link>
				</div>
				<ul class="listCore">
					<li>
						<a><img @click='tolist(0)' src="../assets/home/image/home_popular_2.jpg" /><i class="maskCore"></i><span>地铁10分钟</span></a>
					</li>
					<li>
						<a><img @click='tolist(2)' src="../assets/home/image/home_popular_3.jpg" /><i class="maskCore"></i><span>热门楼盘</span></a>
					</li>
					<li>
						<a><img @click='tolist(3)' src="../assets/home/image/home_popular_4.jpg" /><i class="maskCore"></i><span>带办公家具</span></a>
					</li>
					<li>
						<a><img @click='tolist(1)' src="../assets/home/image/home_popular_5.jpg" /><i class="maskCore"></i><span>知名物业</span></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="spaceComm"></div>
		<div class="entrustWrap">
			<img src="../assets/home/image/home_lookup.jpg" />
			<p class="tipEntrust">专业经纪人帮你找办公室</p>
			<div class="entrustForm">
				<input type="text" v-model="phone" id="appointment_input_tel" placeholder="请输入手机号码，顾问一对一服务" class="iptEntrust">
				<span class="btSubEntrust" id="verify-code-pop-btn" @click="btSub">马上找房</span>
				<span class="btSubEntrust" style="display: none" id="disable-btn">已预约</span>
				<p class="phoneerror" v-if="show">请输入正确的手机号</p>
			</div>

			<p class="tipSmallEntrust">已有<span>390612</span>人委托好租找到满意办公室</p>
			<div class="yanzheng-boxbag" v-if="shows" @click="setMaskShow">
				<div class="yanzheng-box">
					<div class="yanzheng-close"><img @click="yanzhengclose" src="../assets/home/image/colse_03.png" /></div>
					<div class="yanzheng-form">
						<h1 class="yanzheng-h1">输入验证码</h1>
						<div class="formPopPre mt32">
							<div class="clearfix">
								<input type="text" id="image-indetify-code" maxlength="4" placeholder="输入字符验证码" class="iptPopPre">
								<div class="code" @click="refreshCode">
									<SIdentify :identifyCode="identifyCode"></SIdentify>
								</div>
								<p class="indetify-codes" v-if="fgcode">字符验证码错误！</p>
							</div>

						</div>
						<div class="formPopPre">
							<div class="clearfix">
								<input type="text" v-model="shortCode" maxlength="6" placeholder="输入短信验证码" class="iptPopPre">
								<button @click="phonCode" v-bind:class="active">{{textCode}}</button>
							</div>
							<p class="indetify-codes" v-if="fgcodes">短信验证码输入错误！</p>
						</div>
						<button class="subPopPre submit over" @click="submitover">提&nbsp;交</button>
						<p class="indetify-codes" v-if="suerr">内容不能为空!</p>
					</div>
				</div>
			</div>

		</div>
		<div class="spaceComm"></div>
		<div class="coreWrap">
			<div class="topCore">
				<h2>资讯中心</h2>
				<router-link to='/news'>更多>></router-link>
			</div>
			<router-link to='/list/news' class="hotMain"><img src="../assets/home/image/home_iocn_5.jpg" />
				<div class="hotMainTxt">
					<h3>不惧市场寒冬 好租楼点通携145楼盘玩转理想办公季</h3>
					<div class="hotMainCon">
						好租楼点通自12月18日起开启为期一个月的“理想办公季”，共有SOHO3Q、华润置地、纳什空间、氪空间等43家知名品牌积极参与。此前，楼点通已连续三个季度打造同系列活动，每次都成单口碑双丰收。 </div>
				</div>
			</router-link>
			<ul class="listHotTopic">
				<li>
					<router-link to='/newsparticulars'>
						<p>奥所未来城：构建在虹桥枢纽腹地的未来之城</p><span>12-27</span></router-link>
				</li>
				<li>
					<router-link to='/newsparticulars'>
						<p>解析：七种办公室装修常用的玻璃材料</p><span>12-04</span></router-link>
				</li>
				<li>
					<router-link to='/newsparticulars'>
						<p>突围寒冬 遇见春光—论道企业破局闭门私享会</p><span>01-02</span></router-link>
				</li>
				<li>
					<router-link to='/newsparticulars'>
						<p>资本市场冷了，上海的众创空间却热着，谁在里面办公？</p><span>01-02</span></router-link>
				</li>
			</ul>
		</div>

		<footer class="bgFoot">
			<ul class="listFoot">
				<li><i class="iconFootTrue">真</i>所有房源实地勘测</li>
				<li><i class="iconFootWide">广</i>海量楼盘全面覆盖</li>
				<li><i class="iconFootExpert">专</i> 专业顾问选址分析</li>
				<li><i class="iconFootWhole">全</i> 企业服务一站搞定</li>
			</ul>
			<div class="footMain">
				<div class="iconFootLogo">
					<img src="../assets/log.png" />
				</div>
				<router-link to='' class="telFoot"><i>免费咨询：</i>400-612-5329</router-link>
				<router-link to='/about' class="btAoutHaozu">关于好租</router-link>
				<div class="footMainTxt">
					<p>©2015-2019 北京好租科技发展有限公司</p>
					<p>
						<router-link to='' class="footMainTxt_font1">京ICP备16019026号</router-link>
					</p>
					<p>
						<router-link to='' class="footMainTxt_font2"> 京公网安备 11010802025685号
						</router-link>
					</p>
					<p>地址：北京市海淀区上地软件园南路57号八维学院</p>

				</div>
			</div>
		</footer>
		<div class="areaSleWrap">
			<div class="crumbArea">
				<router-link to='/'>好租网</router-link> >
				<router-link to='/'>重庆写字楼出租</router-link>
			</div>
			<div class="navAreaSel">
				<span @click="tabs(index)" v-bind:class="{'on':act==index}" v-for="(tab,index) in tabarr" >{{tab}}</span>
			
			</div>
			<ul class="listAreaSel" id="district" v-show="str[0]">
				<li>
					<router-link to='/list'>渝中写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>江北写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>渝北写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>九龙坡写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>南岸写字楼</router-link>
				</li>
			</ul>
			<ul class="listAreaSel" id="circle" v-show="str[1]">
				<li>
					<router-link to='/list'>李家沱写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>巴南其他写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>九宫庙写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>大渡口其他写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>大石坝写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>观音桥写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>江北嘴写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>五里店写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>江北其他写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>华新街写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>红旗河沟写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>寸滩写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>冉家坝写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>两江新区写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>龙头寺写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>人和写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>人和写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>渝北其他写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>嘉州新牌坊写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>汽博中心写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>光电园写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>石桥铺写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>九龙坡高新区写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>杨家坪写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>九龙坡其他写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>弹子石写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>南坪写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>南坪其他写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>沙坪坝写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>石碾盘写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>大学城写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>三峡广场写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>西南医院写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>菜园坝写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>大坪写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>大溪沟写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>化龙桥写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>解放碑写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>两路口写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>七星岗写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>上清寺写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>渝中其他写字楼</router-link>
				</li>
				<li>
					<router-link to='/list'>朝天门写字楼</router-link>
				</li>
				
			</ul>
		</div>
	</div>
</template>

<script>
	import myheader from '@/components/public/myheader'
	import SIdentify from '@/components/public/identify'
	import mymask from '@/components/public/mymask'
	import myswiper from '@/components/public/myswiper'
	export default {
		name: 'index',
		data() {
			return {
				animate: false,
				fgcode: false,
				active: "subPopPre over yan",
				imgdata: [{
					url: '../../static/home/banner/swiper.jpg'
				}, {
					url: '../../static/home/banner/swiper.jpg'
				}],
				items: [{
					Tou: "青岛首个超高层双子塔开建 投资39亿打造城市综合体"
				}, {
					Tou: "大兴国际机场1.6万亿产业机会 永清迎好机遇"
				}, {
					Tou: "2018十大房产行业新闻盘点"
				}],
				tabarr: ["区域写字楼", "商圈写字楼"],
				act: 0,
				str: [true, false],
				show: false,
				shows: false,
				flag: false,
				suerr: false,
				mydate: {
					btn: ['', '取消']
				},
				identifyCodes: "1234567890",
				identifyCode: "",
				ovrcode: "",
				textCode: "获取验证码",
				auth_time: 0,
				/*倒计时 计数器*/
				shortCode: "", //绑定输入验证码框框
				df: false,
				fgcodes:false,
				phone:"",
				houquNum:""//短信接口返回的验证码
			}
		},
		mounted() {
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
		},
		created() {
			setInterval(this.scroll, 2500)
		},
		methods: {
			tolistnews:function(){
				this.$router.push({
					path:'/news'
				});
			},
			tolist:function(ids){
				this.$router.push({
					path:'/list/'+ids
				});
			},
			btSub: function() {
				//				var tel = "/^1(3|4|5|7|8)\d{9}$/";
				if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.phone))) {
					this.show = true;
					setTimeout(() => {
						this.show = false;
					}, 2000)
				} else {
					this.shows = true;
				}
			},
			setMaskShow: function(event) {
				var dom = document.querySelector(".yanzheng-box");
				if (dom) {
					if (!dom.contains(event.target)) {
						//这句是说如果我们点击到了id为child以外的区域
						this.shows = false;
					}
				}
			},
			opsearch() {
				this.flag = true;
				if (this.flag == true) {
					document.querySelector(".seachBox input").blur();
				}
			},
			setting(res) {
				if (res.cances == 1) {
					this.flag = res.flag;
				}
			},
			tabs(index) {
				this.act = index;
				for (var i = 0; i < 2; i++) {
					this.str[i] = false
				}
				this.str[index] = true
			},
			//头条
			scroll() {
				this.animate = true
				setTimeout(() => {
					this.items.push(this.items[0]);
					this.items.shift();
					this.animate = false;
				}, 1500)
			},
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			makeCode(o, l) {
				for (let i = 0; i < l; i++) {
					this.identifyCode += this.identifyCodes[
						this.randomNum(0, this.identifyCodes.length)
					];
				}
				this.ovrcode = this.identifyCode;
			},
//获取短信验证------------------------------------------------------------------------------------
			phonCode() {
				var indetifyCode = document.querySelector("#image-indetify-code").value;
				if (indetifyCode != this.ovrcode) {
					this.fgcode = true;
					setTimeout(() => {
						this.fgcode = false;
					}, 2000)
				} else {
					this.fgcode = false;
					//  验证
					//设置倒计时秒
					if (!this.df) {
						this.df = true;
						this.auth_time = 60;
						var auth_timetimer = setInterval(() => {
							this.auth_time--;
							this.textCode = this.auth_time + "后重新获取";
							this.active = " yanzheng-form subPopPre over1 yan"
							if (this.auth_time <= 0) {
								this.df = false;
								this.textCode = "获取验证码";
								this.active = " yanzheng-form subPopPre over yan"
								clearInterval(auth_timetimer);
							}
								var _this = this;
								var data = {
										usertel:_this.phone
									}
								_this.axios.post(this.ajaxUrls + '/api/Message/sendMsg',_this.qs.stringify(data)).then(function(res) {
									_this.houquNum = res.data;
									
								}).catch(function(err) {
									console.log("查询不到");
								})
							}, 1000);
					}
					
				}
			},
			//提交
			submitover() {
				if(this.shortCode!=this.houquNum){
					this.fgcodes=true;
					setTimeout(() => {
						this.fgcodes = false;
					}, 2000)
				}else{
					console.log("恭喜")
				}
			},
			yanzhengclose() {
				this.shows = false;
			}
		},
		components: {
			myheader,
			myswiper,
			mymask,
			SIdentify
		},
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.seachBox {
		width: 96%;
		padding: 0rem 0.5rem;
		box-sizing: border-box;
		position: absolute;
		top: 3.9rem;
		z-index: 99;
		right: 5%;
	}
	
	a {
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-user-select: none;
		-moz-user-focus: none;
		-moz-user-select: none;
	}
	.anim {
		transition: all 1.5s;
		margin-top: -34px;
	}
	
	.iptHeader {
		border: none;
		background: #fff;
		width: 6.1rem;
		height: 0.7rem;
		outline: none;
		padding-left: 0.2rem;
		box-sizing: border-box;
	}
	
	.seachBox input::-webkit-input-placeholder {
		font-size: 0.2rem;
	}
	
	.btSelectHeader {
		display: block;
		background: #fff;
		width: 0.6rem;
		height: 0.7rem;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0
	}
	
	.btSelectHeader img {
		width: 0.3rem;
		height: 0.3rem;
		margin-top: 0.2rem;
	}
	
	.nav-list {
		padding: 0.3rem;
		display: flex;
		background: white;
		justify-content: space-around;
		box-sizing: border-box;
		overflow: hidden
	}
	
	ul {
		list-style: none;
	}
	
	a {
		text-decoration: none;
	}
	
	.nav-list li {
		display: inline-block;
		text-align: center;
	}
	
	.nav-list li a {
		display: block;
		width: 1.5844rem;
		height: 1.5rem;
		color: #666;
		text-align: center;
		font-size: 0.2rem;
		overflow: hidden;
	}
	
	.nav-list span {
		display: block;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		margin-left: 0.3rem;
		margin-bottom: 0.1rem;
		text-align: center;
	}
	
	.nav-list span img {
		width: 0.56rem;
		height: 0.55rem;
		margin-top: 0.2rem;
	}
	
	.nav-list span.bgColorA {
		background: #f3b240;
	}
	
	.nav-list span.bgColorB {
		background: #82c8e8;
	}
	
	.nav-list span.bgColorC {
		background: #44c288;
	}
	
	.nav-list span.bgColorD {
		background: #f47e4b;
	}
	
	.nav-list span.bgColorE {
		background: #46c3da;
	}
	
	.nav-list span.bgColorF {
		background: #f09f5f;
	}
	
	.nav-list span.bgColorG {
		background: #849ed2;
	}
	
	.coreWrap {
		background: #fff;
		padding: 0.2rem;
		box-sizing: border-box;
	}
	
	.topCore {
		overflow: hidden;
	}
	
	.topCore h2 {
		float: left;
		display: inline;
		line-height: 0.8rem;
		font-size: 0.3rem;
		color: #5b5b5b;
	}
	
	.coreWrap .listCore li:nth-child(odd) {
		margin: 0 .13333333rem 0 0;
	}
	
	.listCore {
		overflow: hidden;
	}
	
	.coreWrap .listCore li {
		width: 3.48rem;
		height: 3rem;
		float: left;
		display: inline;
		margin: 0 0 0.1rem 0;
	}
	
	.coreWrap .listCore li a {
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.coreWrap .listCore li a img {
		width: 100%;
		height: 100%;
		-moz-border-radius: 0.14rem;
		-webkit-border-radius: 0.14rem;
		border-radius: 0.14rem;
	}
	
	.maskCore {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-moz-border-radius: 0.14rem;
		-webkit-border-radius: 0.14rem;
		border-radius: 0.14rem;
		background-image: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(0, 0, 0, .8) 100%);
	}
	
	.coreWrap .listCore li a span {
		color: #fff;
		position: absolute;
		bottom: 0.26rem;
		left: 0.4rem;
		font-size: 0.35rem;
	}
	
	.areaTop {
		width: 100%;
		position: relative;
		overflow: hidden;
	}
	
	.areaTop span {
		display: block;
		float: left;
		font-weight: 700;
		color: #666;
		font-size: 0.13rem;
		padding: 0.14rem 0;
	}
	
	.nearby {
		display: block;
		line-height: 0.5rem;
		float: right;
		color: #666;
		font-weight: 400;
		font-size: 0.13rem;
	}
	
	.coreWrap .listArea {
		padding: 0 0 0.26666667rem;
	}
	
	.coreWrap .listArea li {
		float: left;
		display: inline;
	}
	
	.coreWrap .listArea li a {
		display: block;
		width: 1.18rem;
		height: 0.7rem;
		text-align: center;
		text-align: -webkit-center;
		text-align: -moz-center;
		line-height: 0.7rem;
		color: #666;
		font-size: 0.15rem;
	}
	
	.spaceComm {
		height: 0.27rem;
		overflow: hidden;
		background: #f5f6fb;
		box-sizing: border-box;
	}
	
	.swiper-box {
		background: #fff;
		height: 0.86rem;
		line-height: 0.86rem;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		overflow: hidden
	}
	
	.titHeadlines {
		position: absolute;
		display: inline;
		color: #f90;
		font-style: italic;
		padding: 0rem 0.2rem;
		vertical-align: middle;
		font-size: 0.2rem;
		z-index: 99;
	}
	
	.listHeadlines {
		float: right;
		display: inline;
		width: 5.866rem;
		height: 0.866rem;
		overflow: hidden;
		vertical-align: middle;
	}
	
	.swiper-box .swiper-itme {
		text-align: left;
	}
	
	.swiper-box .swiper-itme span {
		color: #999;
		font-size: 0.15rem;
		position: absolute;
		display: block;
		width: 0;
		top: 0.1rem;
		right: 0.6rem;
	}
	
	.swiper-box .swiper-itme a {
		display: block;
		width: 80%;
		line-height: 0.86666667rem;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		color: #999;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: relative;
		font-size: 0.12rem;
	}
	
	.registerWrap {
		padding: 0.27rem;
		background: #fff;
	}
	
	.registerWrap a {
		display: block;
		width: 7rem;
		height: 2rem;
		position: relative;
	}
	
	.registerWrap a img {
		width: 100%;
		height: 100%;
	}
	
	.topCore a {
		color: #999;
		float: right;
		display: inline;
		padding: 0.2rem;
		font-size: 0.15rem;
		box-sizing: border-box;
	}
	
	.hotTopic .hotTopicLeft {
		float: left;
		display: inline;
	}
	
	.hotTopic .hotTopicLeft a {
		position: relative;
		display: block;
		width: 2.22rem;
		height: 3.75rem;
	}
	
	.hotTopic .hotTopicLeft a img {
		width: 100%;
		height: 100%;
		-moz-border-radius: 0.13rem;
		-webkit-border-radius: 0.13rem;
		border-radius: 0.13rem;
	}
	
	.hotTopic .listCore li:nth-child(odd) {
		margin: 0 0.13rem 0 0.13rem;
	}
	
	.hotTopic .hotTopicLeft a .maskCore {
		background-image: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(0, 0, 0, .8) 100%);
	}
	
	.hotTopic .hotTopicLeft a span {
		display: block;
		width: 100%;
		height: 0.4rem;
		color: #fff;
		position: absolute;
		bottom: 0.23rem;
		left: 0;
		text-align: center;
		font-size: 0.35rem;
	}
	
	.hotTopic .listCore li {
		width: 2.283rem;
		height: 1.8rem;
		margin: 0 0 .14666667rem 0;
	}
	
	.entrustWrap {
		background: #fff;
		padding: 0.23rem;
		position: relative;
		box-sizing: border-box;
		position: relative;
	}
	
	.entrustWrap img {
		width: 7rem;
		height: 2.6rem;
	}
	
	.tipEntrust {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0.72rem;
		color: #fff;
		text-align: center;
		letter-spacing: 0.08rem;
		font-size: 0.2rem;
	}
	
	.entrustForm {
		width: 6rem;
		height: 0.6rem;
		line-height: 0.6rem;
		background: #fff;
		position: absolute;
		top: 1.6rem;
		left: 0.8rem;
		-moz-border-radius: 0.053rem;
		-webkit-border-radius: 0.053rem;
		border-radius: 0.053rem;
		font-size: 12px!important;
	}
	
	.iptEntrust {
		border: none;
		width: 6rem;
		height: 0.6rem;
		position: absolute;
		top: 0;
		left: 0;
		outline: none;
		padding: 0 0 0 0.2rem;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-top-right-radius: 0.05rem;
		border-bottom-right-radius: 0.05rem;
	}
	
	.entrustForm input::-webkit-input-placeholder {
		font-size: 0.12rem!important;
	}
	
	.btSubEntrust {
		display: block;
		width: 1.6rem;
		height: 0.6rem;
		position: absolute;
		top: 0;
		right: 0;
		color: #fff;
		background: #f90;
		text-align: center;
		border-top-right-radius: 0.05rem;
		border-bottom-right-radius: 0.05rem;
	}
	
	.phoneerror {
		color: red;
		position: absolute;
		font-size: 0.12rem;
		top: 0.6rem;
	}
	
	.tipSmallEntrust {
		text-align: center;
		color: #999;
		padding: 0.13rem 0 0 0;
	}
	
	.tipSmallEntrust span {
		color: #f90;
	}
	
	.hotMain {
		display: block;
		padding: 0 0 0.25rem 0;
		border-bottom: 0.025rem solid #efefef;
	}
	
	.hotMain img {
		float: left;
		display: inline;
		width: 2.3rem;
		height: 1.8rem;
	}
	
	.hotMainTxt {
		float: left;
		display: inline;
		width: 4.4rem;
		height: 2.4rem;
		margin: 0 0 0 0.267rem;
		font-size: 0.20rem;
	}
	
	.hotMainTxt h3 {
		color: #666;
		width: 4.4rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
	
	.hotMainCon {
		color: #999;
		line-height: 0.4rem;
		padding: 0.2rem 0 0 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical
	}
	
	.listHotTopic {
		padding: 0.13rem 0 0.26rem;
		font-size: 12px!important;
	}
	
	.listHotTopic li a {
		display: block;
		height: 0.6rem;
		line-height: 0.6rem;
		color: #666;
	}
	
	.listHotTopic li a p {
		float: left;
		display: inline;
		width: 6.3rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.listHotTopic li a span {
		float: right;
		display: inline;
	}
	
	.bgFoot {
		width: 100%;
		background: #2d2d2d url(../assets/home/image/foot_bg_09.jpg) no-repeat;
		background-size: contain;
		background-position: left bottom;
		overflow: hidden;
	}
	
	.listFoot {
		overflow: hidden;
		padding: 0.5rem 0 0 0.5rem;
		box-sizing: border-box;
	}
	
	.listFoot li:nth-child(odd) {
		margin: 0 0.2rem 0 0;
	}
	
	.listFoot li {
		color: #999;
		width: 3.3rem;
		height: 0.8rem;
		float: left;
		display: inline;
		margin: 0 0 0.3rem 0;
		font-size: 13px;
	}
	
	.listFoot li i {
		margin-right: 0.2rem;
		font-size: 0.5rem;
	}
	
	.footMain {
		padding: 0.26rem;
		text-align: center;
		border-top: 0.025rem solid #333;
		overflow: hidden;
	}
	
	.iconFootLogo {
		width: 100%;
		height: 1rem;
		overflow: hidden;
		margin-bottom: 0.2rem;
	}
	
	.iconFootLogo img {
		width: 1.32rem;
		margin: auto;
	}
	
	.telFoot {
		font-size: 0.23rem;
	}
	
	.telFoot i {
		font-size: 0.28rem;
	}
	
	.telFoot i {
		font-style: normal;
	}
	
	.telFoot {
		display: block;
		margin: 0 0 0.26rem;
		overflow: hidden;
		font-family: Georgia;
		color: #999;
		text-align: center;
	}
	
	.btAoutHaozu {
		display: block;
		text-align: center;
		color: #999;
		padding: 0 0 0.13rem;
	}
	
	.footMainTxt {
		text-align: center;
		line-height: 0.48rem;
		color: #666;
	}
	
	.footMainTxt_font1 {
		color: #666;
		height: 2rem;
		font-size: 0.4rem;
	}
	
	.footMainTxt_font2 {
		color: #666;
		font-size: 0.2rem;
	}
	
	.areaSleWrap {
		padding: 0 0 0.5rem;
	}
	
	.crumbArea {
		color: #999;
		line-height: 0.6rem;
		margin: 0 0.26rem;
	}
	
	.crumbArea a {
		color: #333;
	}
	
	.navAreaSel {
		height: 0.66rem;
		line-height: 0.66rem;
		border-bottom: 0.025rem solid #efefef;
		margin: 0 0.26rem;
		font-size: 0.12rem;
	}
	
	.navAreaSel span.on {
		border-bottom: 0.025rem solid #ccc;
	}
	
	.navAreaSel span {
		display: inline-block;
		margin-right:0.2rem ;
		height: 0.6rem;
		line-height: 0.6rem;
	}
	
	.listAreaSel {
		padding: 0.13rem 0 0 0;
	}
	
	.listAreaSel li {
		float: left;
		font-size: 0.12rem!important;
	}
	
	.listAreaSel li a {
		display: block;
		width: 1.8rem;
		height: 0.6rem;
		line-height: 0.6rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #999;
		text-align: center;
	}
	
	.yanzheng-box {
		position: absolute;
		width: 5rem;
		height: 4rem;
		padding: 0 0.6rem 0.8rem 0.4rem;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border-radius: 0.1rem;
		background: #fff;
		z-index: 2;
	}
	
	.yanzheng-boxbag {
		z-index: 999;
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		margin: 0px auto;
		overflow-y: auto;
		transform-origin: 0px 0px 0px;
		opacity: 1;
		transform: scale(1, 1);
		background: rgba(0, 0, 0, 0.6);
	}
	
	.yanzheng-close {
		display: inline-block;
		width: 0.3rem;
		height: 0.3rem;
		position: absolute;
		right: 0.4rem;
		top: 0.4rem;
		font-size: 0.12rem;
		color: #333333;
	}
	
	.yanzheng-close img {
		width: 100%;
		height: 100%;
	}
	
	.yanzheng-h1 {
		display: block;
		font-size: 0.32rem;
		font-weight: 400;
		height: 0.48rem;
		line-height: 0.48rem;
		padding-top: 0.4rem;
		color: #333;
	}
	
	.formPopPre.mt32 {
		margin-top: 0.32rem;
	}
	
	.yanzheng-form .formPopPre {
		position: relative;
		margin-bottom: 0.64rem;
		display: block;
	}
	
	.clearfix .iptPopPre {
		position: relative;
		width: 2.8rem;
		height: 0.6rem;
		border: none;
		outline: none;
	}
	
	.clearfix,
	.subPopPre,
	.subPopPre.over input::-webkit-input-placeholder {
		font-size: 0.12rem!important;
		outline: none;
	}
	
	.yanzheng-form .subPopPre.over1.yan {
		color: #037af5;
	}
	
	.yanzheng-form .subPopPre.over.yan {
		color: #fff;
	}
	
	.indetify-codes {
		position: absolute;
		color: red;
	}
	
	.yanzheng-form .code {
		border-left: 0.025rem solid #ccc;
		position: absolute;
		top: 0;
		right: -0.3rem;
		width: 1.9rem;
		height: 0.6rem;
		border-top-right-radius: 0.06rem;
		border-bottom-right-radius: 0.06rem;
	}
	
	.subPopPre {
		width: 2rem;
		height: 0.6rem;
		text-align: center;
		background: #f90;
		line-height: 0.6rem;
		border: 0;
		position: absolute;
		top: 0.02rem;
		border-top-right-radius: 0.06rem;
		border-bottom-right-radius: 0.06rem;
	}
	
	.indetify-codes {
		font-size: 0.13rem;
	}
	
	.yanzheng-form .subPopPre.over,
	.subPopPre.over1 {
		background: #b2b2b2;
	}
	
	.yanzheng-form .subPopPre.yan {
		right: -0.4rem;
	}
	
	.yanzheng-form .subPopPre.submit {
		position: relative;
		top: inherit;
		left: inherit;
		display: block;
		border-radius: 0.06rem;
		width: 100%;
		color: #fff;
	}
</style>